<script setup lang="ts">
// 生意参谋 竞争 品牌识别 高潜品牌识别

import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import SYCM from "~/utils/ali/sycm";
import Trans from "~/utils/sycm/trans";

const loginVisible = ref<Boolean>(false);
const visible = ref<Boolean>(false);
const showZs = ref<Boolean>(false);
const tabState = reactive<any>({
  name: '',
  index: 0,
  data: [],
});
const columns = ref<any[]>();
const calcColumns = () => {
  columns.value = [
    {
      dataIndex: 'brandModel.brandName',
      title: '品牌名称',
      dataType: 'brand',
      fixed: 'left',
      dataField: {
        brand_name: 'brandModel.brandName',
      },
      sorter: (a: any, b: any) => a.brandModel.brandName.localeCompare(b.brandModel.brandName),
    },
    {
      dataIndex: 'tradeIndex',
      title: showZs.value ? '交易指数' : '交易金额',
      sorter: (a: any, b: any) => a.tradeIndex - b.tradeIndex,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (showZs.value) {
          return record.tradeIndex;
        } else {
          return Trans.number(record.tradeIndex);
        }
      }
    },
    {
      dataIndex: 'tradeGrowthRange',
      title: showZs.value ? '增长幅度' : '增长幅度',
      sorter: (a: any, b: any) => a.tradeGrowthRange - b.tradeGrowthRange,
      align: 'right',
      dataType: 'custom',
      slot: 'tradeGrowthRange',
    }
  ]
}
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    getTabIndex();
    const data = await SYCM.getInternalFiberData('#drainRecognition > div.oui-card-content > div.op-mc-brand-recognition-scatter-wrapper > div > div > div > div > div.recharts-responsive-container', 'memoizedProps.children._owner.memoizedProps.data[0]');

    calcColumns();
    tabState.data = [];
    data.forEach((item: any) => {
      tabState.data.push({...item.originData});
    })
    visible.value = true;
    console.log(tabState);
  }
}
// 获取当前选中的tab
const getTabIndex = () => {
  const doms: Element[] = document.querySelectorAll("[id^=__qiankun_microapp_wrapper_for_op_mc] div.ebase-FaCommonFilter-module__root div.ebase-FaCommonFilter-module__bottom > div.ebase-FaCommonFilter-module__left span.oui-tab-switch > span.oui-tab-switch-item");
  for (let i = 0; i < doms.length; i++) {
    let dom: Element = doms[i];
    if (dom && dom.getAttribute('class').includes('oui-tab-switch-item-active')) {
      tabState.name = dom.innerHTML.replaceAll(' ', '').replaceAll("\n", '');
      tabState.index = i;
      return;
    }
  }
}
watch(() => showZs.value, (val) => {
  calcColumns();
});
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal :title="`竞争-竞店识别-${tabState.name}`" width="1000px" style="top: 20px;" v-model:open="visible">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <base-table :table-name="`竞争-品牌识别-${tabState.name}`" :columns="columns" :data-source="tabState.data">
        <template #tradeGrowthRange="record">
<!--          // 上升为红色两位小数点+百分比-->
          <span :style="{
            color: record.tradeGrowthRange>0?'red':'green'
          }">{{ record.tradeGrowthRange > 0 ? '+' : '-'}}{{ record.tradeGrowthRange.toFixed(2) }}%</span>
        </template>
      </base-table>
      <!--      <LostTable v-if="tabState.index===0" :table-name="`竞争-竞店识别-${tabState.name}`" :show-zs="showZs"-->
      <!--                 :data="tabState.data"-->
      <!--      />-->
      <!--      <PotentialTable v-else-if="tabState.index===1" :table-name="`竞争-竞店识别-${tabState.name}`" :show-zs="showZs"-->
      <!--                      :data="tabState.data"-->
      <!--      />-->
    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
